<template>
  <div class="order-detail">
    <HeaderTop>
      <template #left>
        <van-icon
          name="arrow-left"
          @click="router.back()"
          size="20"
          style="transform: translateX(-0.3rem)"
        />
      </template>
      <template #center>
        <div class="text-ellipsis fs-1 wd-75 center" style="color: white">订单详情</div>
      </template>
    </HeaderTop>
    <main class="back-page container" v-if="checkData">
      <van-cell
        v-if="!selectAddress"
        class="o-address"
        center
        is-link
        :to="{ name: 'SelectAddress' }"
      >
        <template #icon>
          <van-icon name="location-o" size="24" color="#3190e8" class="mr-4"></van-icon>
        </template>
        <template #title>
          <span class="strong fs-2 text-2 mr-1">请选择地址</span>
        </template></van-cell
      >
      <van-cell v-else class="o-address" center is-link :to="{ name: 'SelectAddress' }">
        <template #icon>
          <van-icon name="location-o" size="24" color="#3190e8" class="mr-4"></van-icon>
        </template>
        <template #title>
          <span class="strong fs-0 mr-1">{{ selectAddress.name }}</span>
          <span class="fs-5 mr-2">{{ selectAddress.sex == 1 ? "先生" : "女士" }}</span>
          <span class="fs-4" style="vertical-align: bottom">{{ selectAddress.phone }}</span>
        </template>
        <template #label>
          <van-tag type="success">{{ selectAddress.tag }}</van-tag>
          <span class="fs-5 ml-2" style="vertical-align: bottom">{{
            selectAddress.address + selectAddress.address_detail
          }}</span>
        </template>
      </van-cell>
      <div class="arrive-time back-white mt-2">
        <van-row class="ht-100">
          <van-col span="12" class="arrive-text">
            <span class="fs-1 strong ml-9">送达时间</span>
          </van-col>
          <van-col span="12" class="arrive-value">
            <div class="main-color fs-3">
              <span>尽快送达</span><span>&nbsp;|&nbsp;</span
              ><span>预计&nbsp;{{ checkData.delivery_reach_time }}</span>
            </div>
            <div>
              <van-tag size="medium" type="primary" v-if="checkData.cart.is_deliver_by_fengniao"
                >蜂鸟专送</van-tag
              >
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="mt-2">
        <van-cell title="支付方式" value="在线支付" center is-link />
        <van-cell title="红包" value="只在饿了么 APP中支持" center title-class="text-3" />
      </div>
      <div class="mt-2 back-white py-4 px-4">
        <van-image
          style="vertical-align: middle"
          :src="imgBaseUrl + checkData.cart.restaurant_info.image_path"
          height="0.7rem"
          width="0.7rem"
        />
        <span class="fs-1 text-2 ml-1" style="vertical-align: middle">{{
          checkData.cart.restaurant_info.name
        }}</span>
      </div>
      <div class="mt-1 back-white">
        <van-cell
          v-for="item in checkData.cart.groups[0]"
          :key="item._id"
          class="back-white"
          center
        >
          <template #title>
            <span class="fs-5 mr-1">{{ item.name }}</span>
          </template>
          <template #value>
            <span class="warning">x{{ item.quantity }}</span>
            <span class="ml-7">￥{{ item.price }}</span>
          </template>
        </van-cell>
        <van-cell v-if="checkData.cart.extra" class="back-white" center>
          <template #title>
            <span class="fs-5">{{ checkData.cart.extra[0].name }}</span>
          </template>
          <template #value>
            <span class="ml-7">￥{{ checkData.cart.extra[0].price }}</span>
          </template>
        </van-cell>
        <van-cell center>
          <template #title>
            <span class="fs-5">配送费</span>
          </template>
          <template #value>
            <span class="ml-7">￥{{ checkData.cart.deliver_amount || 0 }}</span>
          </template>
        </van-cell>
        <van-cell center>
          <template #title>
            <span class="fs-5 mr-2">订单</span>
            <span class="fs-5">￥{{ checkData.cart.original_total }}</span>
          </template>
          <template #value>
            <span class="warning">待支付</span>
          </template>
        </van-cell>
        <van-cell title="" center>
          <template #value>
            <span class="warning">￥{{ checkData.cart.original_total }}</span>
          </template>
        </van-cell>
      </div>
      <div class="mt-2 mb-20 back-white">
        <van-cell
          title="订单备注"
          is-link
          :to="{ name: 'Remark', params: { mark_id: checkData.id } }"
        >
          <template #value>
            <div class="text-ellipsis">{{ !remark ? "口味、偏好等" : remark }}</div>
          </template>
        </van-cell>
        <van-cell title="发票抬头" value="不需要开发票" is-link />
      </div>
    </main>
    <footer class="pay-order" v-if="checkData">
      <van-row class="ht-100">
        <van-col span="18" class="pay-left">
          <span class="ml-5">待支付&nbsp;</span>
          <span>￥{{ checkData.cart.original_total }}</span>
        </van-col>
        <van-col @click="placeOrder" span="6" class="pay-right">
          <span>确认下单</span>
        </van-col>
      </van-row>
    </footer>
    <router-view v-slot="{ Component }">
      <transition name="detail-show">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs } from "vue";
import { storeToRefs } from "pinia";
import { Toast, Dialog } from "vant";
import { user, shop, constPinia } from "@/store/index";
import { useRouter } from "vue-router";
import { checkout, makeOrder } from "@/api";
import { CheckReturnData_format, PlaceOrder_format } from "@/type/index";
import { imgBaseUrl } from "dir/env.config.ts";
const props = defineProps({
  shopId: {
    type: String,
  },
});
const { shopId } = toRefs(props);
const { selectAddress, remark, user_id } = storeToRefs(user());
const { cartList } = storeToRefs(shop());
const { geohash } = storeToRefs(constPinia());
const router = useRouter();
//验证订单是否符合之后返回的数据
const checkData = ref<CheckReturnData_format>();
const initData = async () => {
  let newArr = new Array();
  const shopCart = cartList.value[shopId.value];
  Object.values(shopCart).forEach(categoryItem => {
    Object.values(categoryItem).forEach(itemValue => {
      Object.values(itemValue).forEach(item => {
        newArr.push({
          attrs: [],
          extra: {},
          id: item.id,
          name: item.name,
          packing_fee: item.packing_fee,
          price: item.price,
          quantity: item.num,
          sku_id: item.sku_id,
          specs: [item.specs],
          stock: item.stock,
        });
      });
    });
  });
  checkData.value = await checkout<CheckReturnData_format>(geohash.value, shopId.value, [newArr]);
  console.log(checkData.value);
};
//下订单
const placeOrder = async () => {
  if (!user_id.value) {
    Dialog.confirm({
      title: "提示",
      message: "你还未登陆,请前往登录",
    })
      .then(() => {
        router.push({ name: "Login" });
      })
      .catch(() => {});
  } else if (!selectAddress.value) {
    Toast.fail("请选择一个地址");
  } else {
    const res = await makeOrder<PlaceOrder_format>(
      user_id.value,
      checkData.value.id,
      selectAddress.value.id,
      shopId.value,
      geohash.value,
      remark.value,
      checkData.value.cart.groups
    );
    if (res.status == 1) {
      router.replace({ name: "Order" });
      cartList.value[shopId.value] = null
    }
  }
};
//调用初始化函数
initData();
</script>

<style lang="scss" scoped>
@import "@/assets/scss/mixin.scss";
.container {
  height: calc(100% - 1.2rem);
  overflow-y: auto;
}
.order-detail {
  position: absolute;
  z-index: 9;
  @include wh(100%, 100%);
  overflow: hidden;
  .o-address {
    background: url(@/assets/images/address_bottom.png) left bottom repeat-x;
    background-size: auto 0.09rem;
    padding-top: 0.5rem;
    padding-bottom: 0.6rem;
    background-color: white;
  }
  .arrive-time {
    box-sizing: border-box;
    @include wh(100%, 2.5rem);
    border-left: 0.15rem $blue solid;
    .arrive-text {
      display: flex;
      align-items: center;
    }
    .arrive-value {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: flex-end;
      box-sizing: border-box;
      padding-right: 0.4rem;
    }
  }
  .pay-order {
    position: fixed;
    bottom: 0;
    left: 0;
    @include wh(100%, 1.2rem);
    .pay-left {
      background-color: #3c3c3c;
      @include sc(0.45rem, white);
      display: flex;
      align-items: center;
    }
    .pay-right {
      background-color: #56d176;
      @include sc(0.45rem, white);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
